<template>
  <!-- 人员管理 -->
  <div style="width: 100%">
    <!-- 页头 -->
    <div class="pageHeader">
      <el-page-header @back="goBack" content="人员管理"></el-page-header>
    </div>
    <!-- 搜索 -->
    <el-form :model="queryParams" size="small" :inline="true" class="search">
      <el-form-item label="搜索用户">
        <el-input v-model="searchFome.username" style="width: 250px" />
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          size="small"
          type="primary"
          plain
          @click="Search()"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-delete"
          size="small"
          type="info"
          plain
          @click="reset()"
        >
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <div style="width: 100%">
      <el-table :data="userList" border>
        <el-table-column
          type="index"
          label="序号"
          width="50px"
          align="center"
        ></el-table-column>
        <el-table-column prop="username" label="用户名" align="center">
        </el-table-column>
        <el-table-column prop="real_name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="role" label="角色" align="center">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.role == '0'">艺术家</el-tag>
            <el-tag
              type="warning"
              v-if="scope.row.role == '1' && scope.row.is_superuser == false"
              >普通用户</el-tag
            >
            <el-tag
              type="danger"
              v-if="scope.row.role == '1' && scope.row.is_superuser == true"
              >管理员</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="400px"
        >
          <template slot-scope="scope">
            <el-button
              @click="resetpsw(scope.row.id)"
              type="success"
              size="small"
              plain
              >重置密码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getAdminUser, resetpassword } from "@/api/admin";
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        username: "",
        pageNum: 1,
        pageSize: 10,
      },
      // 搜索
      searchFome: {
        username: "",
      },
      userinfoList: null,
      // 总页数
      total: 0,
      // 用户列表
      userList: [],
      form: {},
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  created() {
    this.getUserList();
  },
  methods: {
    // 返回按钮
    goBack() {
      // 返回上一页
      this.$router.go(-1);
    },
    // 人员管理列表
    getUserList() {
      getAdminUser().then((res) => {
        this.userList = res.results;
      });
    },
    // 重置密码
    resetpsw(userId) {
      resetpassword(userId)
        .then((res) => {
    this.$message.success("密码重置成功");
    this.getUserList();
        })
        .catch((error) => {
    this.$message.error("密码重置失败，请稍后重试");
    console.error("密码重置失败：", error);
  });
},
// 搜索
    Search() {
      // 备份原始出库列表
      if (!this.userinfoList) {
        this.userinfoList = [...this.userList];
      }

      // 过滤项目列表
      this.userList = this.userinfoList.filter((item) => {
        let match = true;
        for (let key in this.searchFome) {
          const searchValue = this.searchFome[key]; // 搜索条件
          const itemValue = item[key]; // 表格数据
          if (
            typeof searchValue === "string" &&
            typeof itemValue === "string"
          ) {
            // 字符串
            if (!itemValue.includes(searchValue)) {
              match = false;
              break;
            }
          } else if (searchValue !== "" && typeof itemValue === "boolean") {
            // 布尔型
            if (JSON.parse(searchValue) !== itemValue) {
              match = false;
              break;
            }
          } else if (searchValue !== "") {
            // 数值型
            if (Number(searchValue) !== itemValue) {
              match = false;
              break;
            }
          }
        }
        return match;
      });
    },
     // 重置
    reset() {
      this.searchFome = {
        username: "",
      };
      this.getUserList();
      return;
    },
  },
};
</script>

<style lang="less" scoped>
.pageHeader {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 10px;
  height: 15vh;
}
.el-form {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
}
.visible {
  display: flex;
  flex-direction: column;
}
.el-pagination {
  position: absolute;
  right: 20px;
  padding: 20px;
}
</style>
